<template>
  <div>
    <el-row :gutter="2">
      <el-form ref="contractAddGoodsForm" :model="contractAddGoodsFormData" :rules="rules" size="small"
        label-width="100px">
        <el-col :span="24" v-show="false">
          <el-form-item label="合同ID" prop="contractId">
            <el-input v-model="contractAddGoodsFormData.contractId" placeholder="请输入合同ID" :maxlength="11"
              readonly :disabled='true' clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="选择商品" prop="goodsId">
            <el-select v-model="contractAddGoodsFormData.goodsId" placeholder="请输入选择商品" filterable
              :style="{width: '100%'}" @change="setGoods" clearable>
              <el-option v-for="(item, index) in goodsIdOptions" :key="index" :label="item.goodsName"
                :value="item.goodsId" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="商品库存">
            <el-input v-model="goods.goodsNumber" readonly :disabled="true"
              :style="{width: '100%'}" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="商品单价">
            <el-input v-model="goods.goodsValue" readonly :disabled="true"
              :style="{width: '100%'}" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="商品数量" prop="goodsNumber">
            <el-input v-model="contractAddGoodsFormData.goodsNumber" placeholder="请输入商品数量" clearable
              :style="{width: '100%'}" @change="getGoodsNumber()"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="总金额" prop="totalCost">
            <el-input v-model="contractAddGoodsFormData.totalCost" placeholder="根据输入商品数据回车生成"
              :disabled='true' :style="{width: '100%'}" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm" size="mini">添加</el-button>
            <!-- <el-button @click="resetForm">重置</el-button> -->
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import {contractAddGoods} from '@/api/sale'
import {goodsAll, goodsSearch} from '@/api/common'

export default {
  components: {},
  props: ['contractId'],
  data() {
    return {
      contractAddGoodsFormData: {
        contractId: '',
        goodsId: undefined,
        goodsNumber: undefined,
        totalCost: undefined,
      },
      rules: {
        contractId: [{
          required: true,
          message: '请输入合同ID',
          trigger: 'blur'
        }],
        goodsId: [{
          required: true,
          message: '请输入选择商品',
          trigger: 'change'
        }],
        goodsNumber: [{
          required: true,
          message: '请输入商品数量',
          trigger: 'blur'
        }],
        totalCost: [{
          required: true,
          message: '总金额自动生成',
          trigger: 'blur'
        }],
      },
      goodsIdOptions: [],
      //当前选择商品
      goods: {}
    }
  },
  computed: {},
  watch: {
    // 监听合同ID变化
    contractId: function(n, o){
      this.contractAddGoodsFormData.contractId = n
    }
  },
  created() {
    // 创建组件时，初始化合同id
    this.contractAddGoodsFormData.contractId = this.contractId
    // 获取所有商品
    this.getAllGoods()
  },
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['contractAddGoodsForm'].validate(valid => {
        if (!valid) return
        contractAddGoods(this.contractAddGoodsFormData)
        this.contractAddGoodsFormData.goodsId = undefined
        this.contractAddGoodsFormData.goodsNumber = undefined
        this.contractAddGoodsFormData.totalCost = undefined
        this.goods = {}
      })
    },
    resetForm() {
      this.$refs['contractAddGoodsForm'].resetFields()
    },
    // 获取所有商品
    getAllGoods(){
      goodsAll().then(res => {
        this.goodsIdOptions = res.data.goodsList
        if(res.data.goodsList && res.data.goodsList.length != 0){
          // 初始化当前商品
          this.goods = res.data.goodsList[0]
        }
      })
    },
    // 监听商品下拉选择框
    setGoods(value){
      goodsSearch({goodsId: value}).then(res => {
        this.goods = res.data.goods
        console.log(this.goods);
      })
    },
    // 监听商品数量输入框
    getGoodsNumber(){
      // 计算总金额
      let totalCost = this.contractAddGoodsFormData.goodsNumber * this.goods.goodsValue
      this.contractAddGoodsFormData.totalCost = totalCost
    }
  }
}

</script>
<style>
</style>